import React,{Component} from 'react';
import {HeaderBox} from './style'
import 'antd/dist/antd.css'
import 'bootstrap/dist/css/bootstrap.css'
import piclogo from '../../static/images/wangu.png'
import {Link} from 'react-router-dom'
import {withRouter} from 'react-router'
import {connect} from 'react-redux'
import {getDataBySearch} from '../../store/actionCreator'
class Header extends Component{
    constructor(){
        super();
        this.state={
            searchText:''
        }
    }
    search(){
        this.props.history.push('/myblog/article/searchResult');
        this.props.getDataBySearch(this.state.searchText);
    }
    getText(e){
        this.setState({
            searchText:e.target.value
        })
    }
    render(){
        return(
            <HeaderBox>
                <div className="container">
                <nav className="navbar navbar-expand-lg navbar-light my-nav">
                <a className="navbar-brand my-logo" href="#">
                    <img src={piclogo} className="my-logo"></img>
                </a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent" style={{zIndex:999,background:'#fff'}}>
                <ul className="navbar-nav mr-auto">
                    <li className="nav-item">
                        
                    <Link to='/myblog/' className="nav-link" href="#">技术博文<span className="sr-only">(current)</span></Link>
                    </li>
                    <li className="nav-item">
                    
                    <Link to='/myblog/share' className="nav-link" href="#">资源分享</Link>
                    </li>
                </ul>
                </div>
                <form className="form-inline my-2 my-lg-0 d-none d-lg-block">
                    <input className="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search" onChange={(e)=>{this.getText(e)}}/>
                    <button className="btn btn btn-outline-danger my-2 my-sm-0" type="button" onClick={()=>{this.search()}}>搜索</button>
                </form>
            </nav>
            </div>
          </HeaderBox>
        );
    }
}
const mapStateToProps = (state)=>{
    return{
       
    }
}
const mapDispatchToProps = (dispatch)=>{
    return{
        getDataBySearch(data){
            var action = getDataBySearch(data);
            dispatch(action);
        }
    }
}
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Header));